<template>
  <a-card
    style="width: 100%"
    :tab-list="tabList"
    :active-tab-key="tabKey"
    :bordered="false"
    @tabChange="(key) => onTabChange(key)"
  >
    <user-work-article v-show="tabKey === 'article'" @changeArticleCount="changeArticleCount"></user-work-article>
    <p v-show="tabKey === 'app'">app content</p>
    <user-work-project v-show="tabKey === 'project'" @changeProjectCount="changeProjectCount"></user-work-project>
  </a-card>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { List, ListItem, ListItemMeta } from 'ant-design-vue'
import { HomeOutlined } from '@ant-design/icons-vue'
import UserWorkArticle from './user-work-article.vue'
import UserWorkProject from './user-work-project.vue'

//external:jxhxBlog
export default defineComponent({
  components: {
    HomeOutlined,
    [List.name]: List,
    [ListItem.name]: ListItem,
    [ListItemMeta.name]: ListItemMeta,
    UserWorkArticle,
    UserWorkProject,
  },
  setup() {
    const { t } = useI18n()

    const tabState = reactive({
      tabKey: 'article',
      tabList: [
        {
          key: 'article',
          tab: t('dashboard.user-info.userWork.article', { num: 0 }),
        },
        {
          key: 'app',
          tab: t('dashboard.user-info.userWork.app', { num: 0 }),
        },
        {
          key: 'project',
          tab: t('dashboard.user-info.userWork.project', { num: 0 }),
        },
      ],
    })

    const onTabChange = (value: string) => {
      tabState.tabKey = value
    }

    const changeArticleCount = (count: number) => {
      tabState.tabList[0].tab = t('dashboard.user-info.userWork.article', { num: count })
    }

    const changeProjectCount = (count: number) => {
      tabState.tabList[2].tab = t('dashboard.user-info.userWork.project', { num: count })
    }

    return {
      t,
      ...toRefs(tabState),
      changeArticleCount,
      changeProjectCount,
      onTabChange,
    }
  },
})
</script>
<style lang="less" scoped>
::v-deep(.ant-card-meta-title),
::v-deep(.ant-card-meta-description) {
  text-align: left;
}

::v-deep(.ant-card-meta-description > span) {
  font-size: 14px;
}

::v-deep(.ant-card-meta-title > a) {
  color: rgba(0, 0, 0, 0.85);
  transition: all 0.3s;
  font-size: 16px;
  font-weight: 700;
}
</style>

